<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        /*找到html标签、body标签，和挂载的标签 都给他们统一设置样式*/
        html, body, #app, .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
        .el-header {
            background-color: #B3C0D1;
            line-height: 25px;
        }
        el-aside {
            background-color: #D3DCE6;
            color: #333;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }
        .code-container {
            position: relative;
        }
        .code {
            background-color: #f4f4f4;
            font-family: 'Microsoft YaHei', sans-serif;;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .copy-button {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            padding: 5px 10px;
            cursor: pointer;
        }


    </style>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-router.js"></script>
    <link rel="stylesheet" href="/css/el/index.css">
    <script src="/js/el/index.js"></script>
    <script type="text/javascript" src="/js/axios/index.js"></script>
    <script type="text/javascript" src="/api/ajax.js"></script>
    <script src="js/marked/marked.js"></script>

</head>
<body>
<div id="app">
    <el-tabs value="operationPanel">
        <el-tab-pane label="操作面板" name="operationPanel">
            <el-button @click="triggerUpdate('/updateFollows')">更新关注人</el-button>
            <el-button @click="triggerUpdate('/followLikeComment')">关注点赞评论</el-button>
            <el-button @click="triggerUpdate('/updateContentRank')">更新内容排行榜</el-button>
            <el-button @click="triggerUpdate('/gitProjectDTOList')">获取Gitee项目</el-button>
            <el-button @click="xxx">测试</el-button>

        </el-tab-pane>
        <el-tab-pane label="下载列表" name="downloadsList">
            <el-form inline :model="queryParam" class="demo-form-inline">
                <el-form-item label="选择日期">
                    <el-date-picker v-model="queryParam.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="关键词">
                    <el-input v-model="queryParam.title"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="queryParam.type" placeholder="请选择">
                        <el-option value="pay"></el-option>
                        <el-option value="score"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" highlight-current-row @current-change="query" empty-text="暂无数据" @sort-change="sortChange" style="width: 100%">
                <el-table-column property="id" label="id" width="120" sortable="custom"></el-table-column>
                <el-table-column property="username" label="username" width="120" sortable="custom"></el-table-column>
                <el-table-column property="date" label="date" width="120" sortable="custom"></el-table-column>
                <el-table-column property="price" label="price" width="120" sortable="custom"></el-table-column>
                <el-table-column property="score" label="score" width="120" sortable="custom"></el-table-column>
                <el-table-column property="title" label="title" sortable="custom"></el-table-column>
                <el-table-column property="url" label="url" sortable="custom"></el-table-column>
            </el-table>
            </el-pagination>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryParam.pageNum"
                    :page-sizes="[15, 20, 30, 40]"
                    :page-size="queryParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-tab-pane>
    </el-tabs>


</div>

</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                queryParam:{
                    date:'2024-05-07',
                    title:'java',
                    type:'pay',
                    pageNum:1,
                    pageSize:15,
                    sortInfo:null
                },
                total:0,
                list: [],
            }
        },
        methods: {
            triggerUpdate(url){
                console.log(url)
                axios.get(url)
            },
            xxx(){
                let data = {"username":"zhaoweiah","password":"TBr+rDeG8Vv0EMxJxqxxZ07WNvKqzdk2ZjTVSRHpYO8cJUEXvHX0BJWrLf0VUl0YbR3Q6a30iePALCV8wKYAg5KTegiHykqEt3hnkmhVBUNZvMScwjQothSZLEdRQi/ireVWGrDGN8ps/5zU8zLHaCBoS+BRWmG/BmKmeUfStQs="}
                axios.post('https://test-screen.enn.cn:444/api/v1/operation/safe/participant', data).then(res => {
                    console.log(res)
                })
            },
            handleSizeChange(pageSize){
                this.queryParam.pageSize = pageSize;
                this.query();
            },

            handleCurrentChange(pageNum){
                this.queryParam.pageNum = pageNum;
                this.query();
            },
            sortChange(info){
                let prop = info.prop;
                let order = info.order;
                console.log(info);
                this.queryParam.sortInfo = prop+" "+order;
                this.query();
            },
            query() {
                axios.post('/downloads/list', this.queryParam).then(res => {
                    if(res.data.success){
                        this.list = res.data.data.list
                        this.total = res.data.data.total
                    }else {
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
    })
</script>
